<template>
  <div class="goodsInfo_container">
    <!--导航栏-->
    <van-nav-bar title="书本详情" left-arrow @click-left="$router.go(-1)"/>
    <!-- 显示图片-->
    <div class="goodsInfo_image">
      <img :src="goodsDetail.imageUrl" alt="图片加载失败"/>
    </div>
    <!--书本信息-->
    <div class="info_container">
      <div class="name">{{ goodsDetail.name }}</div>
      <div class="description">{{ goodsDetail.description }}</div>
      <div class="price_container">
        <span class="sell-price">{{ goodsDetail.price | moneyFormat() }}</span>
        <del class="sale-price">原价：{{ goodsDetail.salePrice | moneyFormat() }}</del>
      </div>
    </div>

    <!--产品详情-->
    <div class="goodsInfoDetail">
      <p class="title">
        <span>产品详情</span>
      </p>

      <p class="number">
        <span class="label">产品编号:</span>
        <span class="content">{{ goodsDetail.id }}</span>
      </p>

      <p class="author">
        <span class="label">作者:</span>
        <span class="content">{{ goodsDetail.author }}</span>
      </p>

      <p class="press">
        <span class="label">出版社:</span>
        <span class="content">{{ goodsDetail.press }}</span>
      </p>
    </div>

    <!--书本数量-->
    <van-cell-group class="goodsCountDetail">
      <van-cell title="数量">
        <van-stepper :max="10" :min="1" input-width="60px" integer v-model="count"/>
      </van-cell>
    </van-cell-group>

    <!--按钮-->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服"/>
      <van-goods-action-icon icon="shop-o" text="购物车" @click='$router.push({name:"cartIndex"})'/>
      <van-goods-action-button @click="addCart" color="#be99ff" type="warning" text="加入购物车"/>
      <van-goods-action-button @click="buyNow" color="#7232dd" type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>
import filter from "../../filters/filter";

export default {
  name: "GoodsDetail",
  data() {
    return {
      count: 1,
      goodsDetail: {},
      userId: ""
    };
  },
  created() {
    this.userId = this.$store.getters.user.userId;
    if (!this.$route.query.bookId) {
      this.$router.push("/index");
      this.$toast.fail('加载失败');
    } else {
      this.getGoodDetail(this.$route.query.bookId);
    }
  },

  filters: {
    moneyFormat(money) {
      return filter.moneyFormat(money);
    }
  },

  methods: {
    // getBooks详情
    async getGoodDetail(id) {
      let res = await this.$axios.post(this.$api.getBookInfoById, {bookId: id});
      if (res.status === 200 && res.data.code === 200) {
        this.goodsDetail = res.data.data;
      } else {
        this.$toast.fail("加载失败");
      }
    },

    //加入购物车
    async addCart() {
      let params = {bookId: this.$route.query.bookId, count: this.count, userId: this.userId};
      let res = await this.$axios.post(this.$api.addCart, params);
      if (res.status === 200 && res.data.code === 200) {
        this.$toast.success("添加成功");
        this.$router.push("/cartIndex");
      } else {
        this.$toast.fail(res.data.message);
      }
    },

    //现在购买
    buyNow() {
      //本地存储购买书本的ID
      if (localStorage.getItem("selectedGoodsList")) {
        localStorage.removeItem("selectedGoodsList");
      }
      // 保存商品的ID
      let goodsId = JSON.stringify([this.goodsDetail.id]);
      //本地存储
      localStorage.setItem("selectedGoodsList", goodsId);

      // 删除的选择的地址信息
      localStorage.removeItem("selectAddress");
      this.$router.push({path: '/submitOrders', query: {type: 1, count: this.count}});
    }
  }
};
</script>
<style lang="less" scoped>
.goodsInfo_container {
  padding-bottom: 60px;
  background-color:#f5f5f5;

  .goodsInfo_image {
    width: 100%;
    height: 15rem;

    img {
      height: 100%;
      width: 100%;
    }
  }

  .info_container {
    padding: .3rem .8rem;
    background-color: #fff;

    .name {
      margin: .3rem 0;
      font-size: 1rem;
      font-weight: bold;
    }

    .description {
      font-size: .6rem;
      color: #969696;
    }

    .price_container {
      margin-top: .2rem;

      .sell-price {
        color: #786AE4;
        font-size: 18px;
        margin-right: .7rem;
      }

      .sale-price {
        color: #969696;
        font-size: 12px;
      }
    }
  }

  .goodsInfoDetail {
    margin: .4rem 0;
    box-sizing: border-box;
    padding: .3rem 0;
    height: 5rem;
    background-color: #fff;

    p {
      margin: 0;
      box-sizing: border-box;
      background-color: #fff;
      padding-left: 1rem;

      .label {
        font-size: .8rem;
      }

      .content {
        font-size: .7rem;
      }
    }

    .title {
      span {
        font-size: .9rem;
        border-left: 5px solid #786AE4;
        padding-left: .4rem;
        font-weight: bold;
      }
    }

    .number {
      float: left;
      width: 50%;
      margin-top: .4rem;
    }

    .author {
      margin-top: .4rem;
      float: left;
      width: 50%;
    }

    .press {
      float: left;
      width: 60%;
      margin-top: .4rem;
    }

  }
}
</style>
